import flipHorizontal from "@/assets/svg/flip-horizontal.svg";
import flipVertical from "@/assets/svg/flip-vertical.svg";
import rotateLeft from "@/assets/svg/rotateLeft.svg";
import rotateRight from "@/assets/svg/rotateRight.svg";
import React, { useState } from "react";
import RotationRuler from "../RotationRuler";
import { SvgIcon } from "../ui/SvgIcon";

import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

// 旋转工具项
interface RotateTool {
  key: string;
  label: string;
  icon: React.ReactNode;
}

// 旋转工具列表
const ROTATE_TOOLS: RotateTool[] = [
  {
    key: "rotate_left",
    label: "向左90°",
    icon: <SvgIcon Icon={rotateLeft} size={24} color="#222" />,
  },
  {
    key: "rotate_right",
    label: "向右90°",
    icon: <SvgIcon Icon={rotateRight} size={24} color="#222" />,
  },
  {
    key: "flip_horizontal",
    label: "水平",
    icon: <SvgIcon Icon={flipHorizontal} size={24} color="#222" />,
  },
  {
    key: "flip_vertical",
    label: "垂直",
    icon: <SvgIcon Icon={flipVertical} size={24} color="#222" />,
  },
];

interface RotateEditorProps {
  onToolSelect?: (toolKey: string) => void;
  onRotationChange?: (angle: number) => void;
}

export default function RotateEditor({ onToolSelect, onRotationChange }: RotateEditorProps) {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [rotationAngle, setLocalRotationAngle] = useState(0);

  // 处理滑动旋转
  const handleRotationChange = (angle: number) => {
    console.log("Rotation angle:", angle);
    onRotationChange?.(angle);
  };

  // 处理旋转工具操作
  const handleRotateTool = async (tool: string) => {
    onToolSelect?.(tool);
  };
  return (
    <View style={styles.container}>
      {/* 旋转刻度尺 */}
      <RotationRuler
        value={rotationAngle}
        minValue={-45}
        maxValue={45}
        thumbColor="#222"
        activeThumbColor="#ff7a45"
        onOffsetValueChange={(value) => {
          handleRotationChange(value);
        }}
      />
      {/* 旋转工具栏 */}
      <View style={styles.editBar}>
        <FlatList
          data={ROTATE_TOOLS}
          horizontal
          showsHorizontalScrollIndicator={false}
          keyExtractor={(item) => item.key}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={styles.editToolBtn}
              onPress={() => {
                handleRotateTool(item.key);
              }}
            >
              {item.icon}
              <Text style={styles.editToolLabel}>{item.label}</Text>
            </TouchableOpacity>
          )}
          contentContainerStyle={{
            alignItems: "center",
            paddingHorizontal: 10,
            justifyContent: 'space-between',
            flexGrow: 1,
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 20, // 根据内容自然撑开高度
  },
  editBar: {},
  editToolBtn: {
    alignItems: "center",
    justifyContent: "center",
    width: 60, // 固定宽度确保对齐
  },
  editToolLabel: {
    fontSize: 10,
    color: "#222",
    marginTop: 4, // 增加图标和文字之间的间距
    textAlign: "center", // 文字居中对齐
  },
});
